<template>
	<view class="content">
		<swiper class="swiper" :autoplay='true' :interval='5000' :circular='true'>
			<swiper-item>
				<image src="../../static/img/banner.jpg"></image>
			</swiper-item>
		</swiper>
		<view class="logo">
			<view>
				<image src="../../static/img/logo.jpg"></image>
			</view>
			<text>诺和医疗</text> 
		</view>
		<view class="news" v-if="notices.length>0">
			<view class="title">
				<icon class="icon-news"></icon>
			</view>
			<swiper class="news-swipe" :vertical='true' :autoplay='true' :interval='5000' :circular='true'>
				<swiper-item v-for="(item,index) in notices" :key="index" class="text" @click="navigateto(`./news?noticeId=${item.noticeId}`)"><span v-html="item.noticeContent"></span></swiper-item>
			</swiper>
		</view>
		<view class="reserve">
			<view class="title">产品预定<span>更多<icon class="icon-arrow"></icon></span></view>
			<view class="list">
				<dl v-for="(item,index) in list" :key="index" @click="navigateto(`../details/details?id=${item.pid}`)">
					<dt>
						<image :src="item.pImgSmall"></image>
					</dt>
					<dd>
						<h2>{{item.pName}}</h2>
						<span>{{item.userIntended}}</span>
					</dd>
				</dl>
			</view>
		</view>
		
		<view class="copyright">
			<p><text>©诺和医疗器械 版权所有</text>皖ICP备10202046号-2<image src="../../static/img/bq.png"></image></p>
			<p>互联网药品信息服务资格证书 [（皖）-非经营性-2022-0082]</p>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pageNo:1,
				list:[],
				notices:[]
			}
		},
		mounted() {
			this.getList()
			this.queryNotice()
		},
		methods: {
			getList(){
				this.$api({
					url:`/product/list/${this.pageNo}`,
					method: "POST",
				}).then(res=>{
					this.list=res.list
				})
			},
			queryNotice(){
				this.$api({
					url:`/notice/list/1`,
					method: "POST",
					content:'application/x-www-form-urlencoded'
				}).then(res=>{
					this.notices=res.list
				})
			},
			navigateto(url) {
				wx.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.swiper {
		width: 750rpx;
		height: 350rpx;
		overflow: hidden;
		position: absolute;
		left: 0;
		top: 0;
		image {
			width: 750rpx;
			height: 350rpx;
		}
	}

	.logo {
		height: 350rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		z-index: 1;
		position: relative;
		view {
			width: 100rpx;
			height: 100rpx;
			overflow: hidden;
			border-radius: 100%;
			background: #fff;
			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
		text {
			font-size: 36rpx;
			margin-left: 20rpx;
			color: #fff;
		}
	}

	.news {
		height: 82rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		background: #fff;
		.title {
			border-right: 2rpx solid #dedede;
			padding-right: 30rpx;
			margin-right: 30rpx;
			icon {
				width: 34rpx;
				display: flex;
				font-size: 34rpx;
				color: #999;
			}
		}

		.news-swipe {
			width: 100%;
			height: 82rpx;
			font-size: 26rpx;
			.text {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
				line-height: 82rpx;
			}
		}
	}

	.reserve {
		padding: 30rpx 0;
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: bold;
			padding: 0 30rpx;
			span {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				font-weight: normal;
				color: #999;
				icon {
					display: flex;
					font-size: 24rpx;
				}
			}
		}
	}

	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 14rpx 20rpx 0;
		dl {
			width: 350rpx;
			background: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			margin-top: 12rpx;
			dt {
				image {
					width: 350rpx;
					height: 350rpx;
				}
			}
			dd {
				padding: 20rpx;
				h2,
				span {
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
				span {
					font-size: 24rpx;
					margin: 8rpx 0 0;
					color: #999;
				}
			}
		}
	}
	
	.copyright {
		padding: 10rpx 0 40rpx;
		p {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #999;
			&:first-of-type {
				margin-top: 0;
			}
			image {
				width: 30rpx;
				height: 30rpx;
				padding-left: 12rpx;
			}
			text {
				padding-right: 30rpx;
			}
		}
	}
	
</style>
